<template>
    <transition
            name="tran_rank"
            enter-active-class="animated fadeIn"
            leave-active-class="animated fadeOut"
    >
    <div class="" id="search">
        <el-card class="box-card">
        <div class="block">
            <el-autocomplete
                    class="inline-input"
                    v-model="input"
                    :clearable="true"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    :trigger-on-focus="false"
                    @select="handleSelect"
            ></el-autocomplete>
            <el-button @click="emitKey()" type="primary" icon="el-icon-search"></el-button>
        </div>
        </el-card>
    </div>
    </transition>
</template>
<script>
    import {log,buildParams} from '@/assets/js/util.js'
    export default{
        props:['bus'],
        name: 'search',
        data () {
            return {
                msg: 'search',
                show:false,
                input:'',
                values:[],
            }
        },
        methods:{
            init:function () {
            },
            emitKey:function () {
                console.log(this.input)
                this.bus.$emit('sendKey', this.input)
                if(this.input.length){
                    this.bus.$emit('sendBread',['搜索关键字"'+this.input+'"的结果'])
                }else{
                    this.bus.$emit('sendBread',[])
                }
            },
            handleSelect(item) {
                console.log(item)
            },
            querySearch(queryString, cb){
                this.values = []
                var params  = []
                params[0] = 'keyword='+queryString
                var url = server_url+'/api/search'
                url = url + buildParams(params)
                this.$http.jsonp(url, {}, {
                    headers: {},
                    emulateJSON: true
                }).then(function(response) {
                    var data = response.data.data
                    console.log(data)
                    for(var i = 0; i<data.length; i++){
                        var obj = {}
                        obj.value = data[i].title
                        obj.id    = data[i].id
                        this.values.push(obj)
                    }
                    if(this.values.length>0){
                        cb(this.values)
                    }else{
                        cb([])
                    }
                }, function(response) {
                    console.log(response)
                });
            }
        },
        mounted:function () {
            this.init()
            this.show = true
        }
    }
</script>

<style>
    #search{
        margin-top: 10px;
    }
    .search-input{
        width: 220px;
    }
</style>